<template>
	<view class="item-block">
		<view class="team_name">
			{{idobj.name}}
		</view>
		<view class="ranking">
			<view class="title">
				贡献度排名
			</view>
			<view class="ranking_table">
				<view class="table_right">
					<uni-table ref="table" :loading="loading" border emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="65" align="center">排名</uni-th>
							<uni-th width="80" align="center">队员</uni-th>
							<uni-th width="100" align="center">贡献分数</uni-th>
							<uni-th width="65" align="center">第1洞</uni-th>
							<uni-th width="65" align="center">第2洞</uni-th>
							<uni-th width="65" align="center">第3洞</uni-th>
							<uni-th width="65" align="center">第4洞</uni-th>
							<uni-th width="65" align="center">第5洞</uni-th>
							<uni-th width="65" align="center">第6洞</uni-th>
							<uni-th width="65" align="center">第7洞</uni-th>
							<uni-th width="65" align="center">第8洞</uni-th>
							<uni-th width="65" align="center">第9洞</uni-th>
							<uni-th width="65" align="center">第10洞</uni-th>
							<uni-th width="65" align="center">第11洞</uni-th>
							<uni-th width="65" align="center">第12洞</uni-th>
							<uni-th width="65" align="center">第13洞</uni-th>
							<uni-th width="65" align="center">第14洞</uni-th>
							<uni-th width="65" align="center">第15洞</uni-th>
							<uni-th width="65" align="center">第16洞</uni-th>
							<uni-th width="65" align="center">第17洞</uni-th>
							<uni-th width="65" align="center">第18洞</uni-th>
							<!-- <uni-th width="100" align="center">所属队伍</uni-th> -->
						</uni-tr>
						<uni-tr v-for="(item, index) in tableData" :key="index">
							<uni-td>{{ index+1 }}</uni-td>
							<uni-td>{{ item.nickName.length > 3 ? item.nickName.slice(0, 3) + '...' : item.nickName }}</uni-td>
							<uni-td>{{ item.totalContribute }}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strOne',item.strOne)">{{ item.strOne ==null?'': formcount(item.strOne)}}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strTwo',item.strTwo)">{{ item.strTwo ==null?'': formcount(item.strTwo)}}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strThree', item.strThree)">{{ item.strThree==null?'': formcount(item.strThree)}}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strFour',item.strFour)">{{ item.strFour==null?'': formcount(item.strFour) }}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strFive',item.strFive)">{{ item.strFive ==null?'': formcount(item.strFive)}}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strSix', item.strSix)">{{ item.strSix ==null?'': formcount(item.strSix)}}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strSeven',item.strSeven )">{{ item.strSeven ==null?'': formcount(item.strSeven)}}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strEight', item.strEight)">{{ item.strEight ==null?'': formcount(item.strEight)}}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strNine', item.strNine)">{{ item.strNine==null?'': formcount(item.strNine) }}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strTen',item.strTen)">{{ item.strTen ==null?'': formcount(item.strTen)}}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strEleven',item.strEleven)">{{ item.strEleven==null?'': formcount(item.strEleven)}}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strTwelve',item.strTwelve)">{{ item.strTwelve ==null?'': formcount(item.strTwelve)}}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strThirteen', item.strThirteen)">{{ item.strThirteen==null?'': formcount(item.strThirteen) }}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strFourteen',item.strFourteen)">{{ item.strFourteen ==null?'': formcount(item.strFourteen)}}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strFifteen',item.strFifteen)">{{ item.strFifteen ==null?'': formcount(item.strFifteen)}}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strSixteen',item.strSixteen)">{{ item.strSixteen ==null?'': formcount(item.strSixteen)}}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strSeventeen',item.strSeventeen)">{{ item.strSeventeen ==null?'': formcount(item.strSeventeen)}}</uni-td>
							<uni-td
								@click.native="tableitem(item.memberId,'strEighteen',item.strEighteen)">{{ item.strEighteen==null?'': formcount(item.strEighteen)}}</uni-td>
						</uni-tr>
					</uni-table>
					<!-- <view class="" style="font-size: 11px; margin-top: 10px; color: #de3600; text-align: center;">
						注:贡献度只允许修改自己的贡献度,不允许修改他人的贡献度
					</view> -->
				</view>
			</view>
			
		</view>
		<u-modal :show="show" :title="title" :closeOnClickOverlay="true" @close='close'>
			<view class="slot-content item">
				<view class="" style="display: flex; width: 100%; margin-bottom: 10px;" v-for="(item,index) in arrlist"
					:key="index">
					<view class="one_item">
						{{item.name}}
					</view>
					<view class="two_item">
						{{item.num}}贡献值
					</view>
					<view class="">
						<u-checkbox-group v-model="item.value">
							<u-checkbox activeColor="#de3600" name="2">
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
			</view>
			<u-button slot="confirmButton" text="确定" type="success" shape="circle" @click="submit"></u-button>
		</u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: true,
				show: false,
				tableData: [],
				idobj: {},
				arrlist: [{
						name: '第一杆',
						num: '',
						value: [],
					},
					{
						name: '第二杆',
						num: '',
						value: [],
					},
					{
						name: 'ON果岭',
						num: '',
						value: [],
					},
					{
						name: '推杆',
						num: '',
						value: [],
					},

				],
				mid: '',
				str: ""
			}
		},
		created() {

		},
		onLoad(options) {
			// 从路由参数中获取传递的值
			this.idobj = JSON.parse(decodeURIComponent(options.id))
			this.formdetail()
			this.forminfo()
		},
		mounted() {



		},
		methods: {
			close() {
				
				this.arrlist.forEach(item => {
					item.value = []; // 将每个对象的 value 设置为空数组
				});
				this.show = false
			},
			formcount(e) {
				if(e==''){
					return ''
				}
				const pairs = e.split(',').map(Number);
				let count = 0
				for (let i = 0; i < pairs.length; i += 2) {
					const num = parseInt(pairs[i + 1], 10); // 获取 num
					count += num

				}
				return count
			},
			formdetail() {
				const that = this
				this.$request(`/race/contributeRank/${this.idobj.rid}/${this.idobj.tid}`, 'get')
					.then(
						res => {
							that.tableData = res.data.data
						})


			},
			forminfo() {
				const that = this
				this.$request(`/race/getRaceContribute/${this.idobj.rid}`, 'get')
					.then(
						res => {
							const data = res.data.data
							that.arrlist[0].num = data.firstPole
							that.arrlist[1].num = data.secondPole
							that.arrlist[2].num = data.greenPole
							that.arrlist[3].num = data.pushRod
						})
			},
			submit() {

				// this.show = false
				const data = {
					memberId: this.mid,
					raceId: this.idobj.rid,
					teamId: this.idobj.tid,
					[this.str]: this.arrlist.map((item, index) => ({
							originalIndex: index,
							item
						})) // 保留原始的 index 和元素
						.filter(obj => Array.isArray(obj.item.value) && obj.item.value.length > 0) // 过滤 value 数组非空的元素
						.map((obj, index) => `${obj.originalIndex},${obj.item.num}`) // 使用原始的 index 和 num 并转化为字符串
						.join(',')
				}
				const that = this
				this.$request(`/race/editContribute`, 'post', data)
					.then(
						res => {
							if(!res.data.data.flag){
								// uni.showToast({
								// 	icon: 'error',
								// 	title: '设置失败',
								// })
								that.$refs.uToast.show({
									type: 'error',
									message: "暂无此修改权限",
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',
									
								})
							}
							that.close()
							that.formdetail()
						})
				// console.log(data);
				// data.[str] = this.arrlist.filter(item => Array.isArray(item.value) && item.value.length > 0) // 只保留 value 数组非空的元素
				//     .map((item, index) => `${index},${item.num}`) // 提取 index 和 num 并转化为字符串
				//     .join(','); // 用逗号连接成最终字符串

			},
			tableitem(mid, str, e) {
				if(this.idobj.state==2){
					return
				}
				this.mid = mid
				this.str = str
				// 将字符串按照逗号分隔
				const pairs = e == null ? [] : e.split(',');
				// 遍历这些值，每一对成对出现的值是 index 和 num
				for (let i = 0; i < pairs.length; i += 2) {
					const index = parseInt(pairs[i], 10); // 获取索引
					const num = parseInt(pairs[i + 1], 10); // 获取 num

					// 确保 index 在数组范围内并且原始数组项的 value 数组不为空
					if (index >= 0 && index < this.arrlist.length) {
						this.arrlist[index].value = ['2']; // 反向赋值给对应项的 num 属性
					}
				}

				this.show = true

			}
		}
	}
</script>

<style scoped lang="scss">
	.item-block {
		height: calc(100vh - 20px);
		background-color: #f4f4f4;
		padding: 10px 0;

		.team_name {
			font-size: 23px;
			text-align: center;
			color: #de3600;
			font-weight: 600;
		}

		.ranking {
			margin-top: 20px;

			.title {
				font-size: 17px;
				font-weight: 600;
				padding-bottom: 5px;
				padding-left: 20px;

			}

			.ranking_table {
				display: flex;

				::v-deep .uni-table-th {
					font-size: 13px;
					color: #de3600;
					font-weight: 600;
				}

				::v-deep .uni-table-td {
					height: 30px !important;

				}



				.table_right {
					width: calc(100% - 20px);
					padding: 0 10px;

					::v-deep .uni-table-td {
						text-align: center !important;
						line-height: 25px;
					}
				}
			}
		}

		.contribute {
			margin-top: 20px;
			border-radius: 20px 20px 0 0;
			background-color: #fff;
			padding: 20px;

			.title {
				font-size: 17px;
				font-weight: 600;
			}

			::v-deep .uni-table-th {
				border: 0 !important;
				font-size: 13px;
				color: #de3600;
				font-weight: 600;
			}

			::v-deep .uni-table .uni-table-tr {
				height: 50px;
			}

			::v-deep .uni-table .uni-table-tr:nth-child(2n) {
				background-color: #f4f4f4 !important;

				:nth-child(1) {
					border-radius: 8px 0 0 8px !important;
				}

				:nth-child(3) {
					border-radius: 0 8px 8px 0 !important;
				}
			}

			::v-deep .uni-table-td {
				border: 0 !important;
				line-height: 34px;
				white-space: nowrap;
				/* 防止文字换行 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;
				/* 超出部分显示省略号 */
				text-align: center !important;
			}
		}

		::v-deep .u-popup {
			.u-button {
				background-color: #de3600 !important;
				border: 0px !important;
			}

			.u-transition {
				justify-content: flex-end !important;
			}

			.u-popup__content {
				margin-bottom: 40px;
			}
		}

		.item {
			width: 100%;
			display: flex;
			// justify-content: space-between;
			flex-direction: column;

			.one_item,
			.two_item {
				width: 40%;
				text-align: center;
			}
		}
	}
</style>